<template>
  <div class="box-trade" v-if="props.data">
    <el-card v-for="(item,index) in props.data" :key="index" class="box-card" >
      <div class="img-box" >
          <el-image fit="cover" :src="item.imgUrl" style="width: 100%;height: 100%;"  @click.stop="handleXiaDan2(item)"></el-image>
          <div class="purchaseNumber"><span >出售编号:</span><span style="margin: 0;">{{ item.releaseNo }}</span></div>
      </div>
      <el-row>
        <el-col :span="24" class="marginTop10"><span style="display: block;width: 200px;width: 100%;" class="text-ellipsis">{{item.companyName}}</span></el-col>
        <el-col :span="24" class="marginTop10"><span style="font-size: 16px;font-weight: 500;">{{ item.carryCityName }}</span>/<span>{{ item.carryCountryName }}</span></el-col>
        <el-col :span="24" class="marginTop10"><span class="span-box">{{ boxTypeFilter(item.boxType) }}</span> <span class="span-box">{{ boxConditionFilter(item.boxCondition) }}</span></el-col>
        <el-col :span="24" class="marginTop10">
          <el-row>
            <el-col :span="12" style="color:#ff0000;font-weight: 500;">{{{'USD':'$','CNY':'¥'}[item.currency]}}{{ item.unitPrice}}</el-col>
            <!-- <el-col :span="12" class="text-right" style="font-weight: 500;">可购箱量{{ item.inventory }}个</el-col> -->
          </el-row>
        </el-col>
        <el-col :span="24" class="marginTop20">
          <el-row justify="center">
            <el-button icon="ChatDotSquare" type="primary" @click.stop="handleZixun1" plain style="width: 40%;">咨询</el-button>
            <el-button v-if="item.companyId != param.userCompanyId" type="primary" plain style="width: 40%;" @click="handleXiaDan1(item)">下单</el-button>
          </el-row>
        </el-col>
      </el-row>
    </el-card>     
    <el-dialog v-model="param.centerDialogVisible" title="提示" width="500" destroy-on-close center>
      <span>您还未完成企业实名认证，请您完成企业实名认证后，就可以进行相应业务功能操作啦！</span>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="param.centerDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="goAuthenticate">企业实名认证</el-button>
        </div>
      </template>
    </el-dialog>
  </div>

    <div class="clearFix"></div>
    <el-empty v-if="props.data.length == 0" description="当前暂无广告数据" />
    <el-pagination v-if="props.data.length > 0  && config.isPagination" v-model:current-page="param.page.pageNum" 
    v-model:page-size="param.page.pageSize" :pager-count="5" :page-sizes="[10, 20, 50, 100]" :total="config.total"
    background layout="total,sizes,prev, pager, next,jumper" @size-change="onHandleSizeChange"
    @current-change="onHandleCurrentChange" size="default" style="float: right;" />
</template>
<script setup lang="ts">
import { computed, onMounted, reactive, ref } from 'vue';
import { ChatDotSquare } from '@element-plus/icons-vue'
import useUserStore from '@/store/modules/user'
const userStore = useUserStore()
onMounted(() => {
  const user = userStore.getUser() //user信息
  param.userCompanyId = user.companyId // 当前登录账号 所属公司id
});

const emit = defineEmits(['handleXiaDan','clickJump','pageChange','handleChakan'])

const props = defineProps({
  data: {
      type: Object,
      default: () => {}
  },
    // 配置项
  config: {
      type: Object,
      default: () => { },
  },
  cardData: {
    type: Object,
    default: () => { }
  }
})

// const handleDetails = (row: any) => {
//   if (userStore.getUser() && userStore.getUser().examineStatus != '10') {
//       param.centerDialogVisible = true
//    }else{
//       emit('clickJump', row)
//   }   
// }
const handleXiaDan1 = (row) => {
   if (userStore.getUser() && userStore.getUser().examineStatus != '10') {
      param.centerDialogVisible = true
   }else{
      console.log('点击了下单')
      emit('handleXiaDan',row)
    }
}
const handleZixun1 = (row) => {
   if (userStore.getUser() && userStore.getUser().examineStatus != '10') {
      param.centerDialogVisible = true
   }else{
      console.log('点击了咨询')
      // emit('handleXiaDan')
    }
}
const handleXiaDan2 = (row) => {
  // emit('clickJump', row)

  emit('handleChakan',row)
}


const param = reactive({
  centerDialogVisible:false,
  userCompanyId: '',
  page: {
      pageNum: 1,
      pageSize: 10
  }
})

import { useRouter } from 'vue-router'
const router = useRouter();
// 实名认证
const goAuthenticate = () => {
  router.push('/enterpriseManage/realAuthentication')
  param.centerDialogVisible = false
}
//过滤
const boxConditionFilter = (val: any) => {
  let result = ''
  const boxConditionList = [{ value: 15, label: '适货' }, { value: 10, label: '次新' }, { value: 20, label: '混提' },{ value: 5, label: '全新' }]
  boxConditionList.forEach((item: { value: any; label: any; }) => {
    if (item.value == val) {
      result = item.label
    }
  })
  return result
}
const boxTypeFilter = (val: any) => {
  let result = ''
  const boxTypeList = [{ value: 5, label: '40HQ' }, { value: 10, label: '40GP' }, { value: 15, label: '20HQ' }, { value: 20, label: '20GP' }]
  boxTypeList.forEach((item: { value: any; label: any; }) => {
    if (item.value == val) {
      result = item.label
    }
  })
  return result
}

// 分页数量
const onHandleSizeChange = (val: number) => {
  param.page.pageSize = val;
  // tableInstanceRef.value!.clearSelection();
  emit('pageChange', param.page);
};
// 分页页码
const onHandleCurrentChange = (val: number) => {
  param.page.pageNum = val;
  // tableInstanceRef.value!.clearSelection();
  emit('pageChange', param.page);
};

</script>

<style scoped>

.box-card{
    width: 19%;
    float: left;
    margin:0 1% 10px 0
}
.img-box{
    width: 100%;
    height: 275px;
    overflow: hidden;
    position: relative;
}
.purchaseNumber{
  position: absolute;
  bottom: 0;
  left: 0;
  background: #2158F3;
  font-size: 12px;
  width: 100%;
  color: #fff;
}
.span-box{
  display: inline-block;
  border:1.5px solid #ccc;
  border-radius: 5px;
  padding: 2px 8px;
}
</style>
